<template>
  <div id="history-box">
    <h3>我的历史信息</h3>
    <el-radio-group v-model="labelPosition" size="small">
      <el-radio-button label="left">左对齐</el-radio-button>
      <el-radio-button label="right">右对齐</el-radio-button>
      <el-radio-button label="top">顶部对齐</el-radio-button>
    </el-radio-group>
    <div style="margin: 20px;"></div>
    <div class="history-info">
      <el-form :label-position="labelPosition" label-width="80px" v-for="history in historyList" :model="history">
        <el-form-item label="昵称">
          <el-input v-model="history.nickname"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="history.password"></el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="history.sex"></el-input>
        </el-form-item>
        <hr />
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "UserPersonalHistoryInfo",
  data() {
    return {
      labelPosition: 'left',
      historyList: [{
        nickname: "笑",
        password: "110",
        sex: "男"
      }, {
        nickname: "库",
        password: "119",
        sex: "女"
      },{
        nickname: "库",
        password: "119",
        sex: "女"
      },{
        nickname: "库",
        password: "119",
        sex: "女"
      },{
        nickname: "库",
        password: "119",
        sex: "女"
      }]
    };
  }
}
</script>

<style scoped>
#history-box{
  position: absolute;
  overflow: hidden;
  width: 60%;
  left: 20%;
  background-color: #f6b6a3;
}
</style>